import { useState, useEffect } from 'react';
import { Image, FlatList, TouchableOpacity, StyleSheet, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { ReminderSettings } from '@/types/Reminder';
import StorageService from '@/services/storage';
import { Platform } from 'react-native';

import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';

export default function HomeScreen() {
  const [reminders, setReminders] = useState<ReminderSettings[]>([]);
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  // 加载提醒数据
  useEffect(() => {
    const loadReminders = async () => {
      try {
        const data = await StorageService.getReminders();
        setReminders(data);
      } catch (error) {
        console.error('Failed to load reminders:', error);
      } finally {
        setLoading(false);
      }
    };

    loadReminders();
  }, []);

  // 添加新提醒
  const handleAddReminder = () => {
    router.push('/add-reminder');
  };

  // 渲染提醒项
  const renderReminderItem = ({ item }: { item: ReminderSettings }) => (
    <ThemedView style={styles.reminderItem}>
      <ThemedText type="subtitle">{item.title}</ThemedText>
      <ThemedText>时间: {item.time}</ThemedText>
      <ThemedText>类型: {item.reminderType === 'alarm' ? '定时提醒' : item.reminderType === 'geofence' ? '地理围栏' : '双重提醒'}</ThemedText>
    </ThemedView>
  );

  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
      headerImage={
        <Image
          source={require('@/assets/images/react-logo.png')}
          style={styles.reactLogo}
        />
      }>
      <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">打卡提醒</ThemedText>
      </ThemedView>

      {loading ? (
        <ThemedView style={styles.loadingContainer}>
          <ThemedText>加载中...</ThemedText>
        </ThemedView>
      ) : reminders.length === 0 ? (
        <ThemedView style={styles.emptyContainer}>
          <ThemedText>暂无提醒，点击右下角按钮添加</ThemedText>
        </ThemedView>
      ) : (
        <FlatList
          data={reminders}
          renderItem={renderReminderItem}
          keyExtractor={(item) => item.id}
          contentContainerStyle={styles.listContent}
        />
      )}

      {/* 添加提醒按钮 */}
      <TouchableOpacity
        style={styles.addButton}
        onPress={handleAddReminder}
        activeOpacity={0.8}
      >
        <Ionicons name="add" size={24} color="white" />
      </TouchableOpacity>
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  reminderItem: {
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    backgroundColor: '#f5f5f5',
  },
  listContent: {
    padding: 16,
  },
  addButton: {
    position: 'absolute',
    bottom: 32,
    right: 32,
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 4,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});
